<template>
  <div class="setter-wrapper-outer">
    <div class="setter-wrapper">
      <a-form>
        <a-form-item label="审批名称" :required="true">
          <a-input :value="value.typeName" placeholder="请输入..." @change="onValueChange($event, 'typeName')" />
        </a-form-item>
        <a-form-item label="选择分组" :required="true">
          <a-select :value="value.groupId" placeholder="请选择..." @change="onValueChange($event, 'groupId')">
            <a-select-option v-for="(item, i) in groupList" :key="i" :value="item.id">{{ item.groupName }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="选择类型" :required="true">
          <a-select :value="value.type" placeholder="请选择..." @change="onValueChange($event, 'type')">
            <a-select-option v-for="(item, i) in typeList" :key="i" :value="item.code">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="撤回方式">
          <a-select :value="value.revokeType" placeholder="请选择..." @change="onValueChange($event, 'revokeType')">
            <a-select-option :value="0">无审批人操作发起人可以撤回</a-select-option>
            <a-select-option :value="1">未完全通过时候允许撤回</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="审批发起">
          <a-select :value="value.isSysStart" placeholder="请选择..." @change="onValueChange($event, 'isSysStart')">
            <a-select-option :value="1">系统发起</a-select-option>
            <a-select-option :value="0">个人发起</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="模板图标">
          <a-row type="flex" align="middle">
            <img style="width:48px;height:48px" :src="value.icon" alt="加载失败" class="mg_r20" />
            <a-button @click="showIcon = true">选择图标</a-button>
          </a-row>
        </a-form-item>
        <a-form-item label="项目说明(最多100字)">
          <a-textarea :value="value.typeDesc" :max-length="100" placeholder="请输入内容" @change="onValueChange($event, 'typeDesc')" />
        </a-form-item>
      </a-form>
      <a-modal v-model="showIcon" :width="528" title="选择图标" :footer="false">
        <a-row type="flex">
          <a-col v-for="(item, i) in icons" :key="i" style="padding: 10px;">
            <img :src="item" style="width:48px; height:48px" alt="加载失败" @click="choseIcon(item)" />
          </a-col>
        </a-row>
      </a-modal>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { loadApprovalGroupListReq, loadApprovalTypeListReq, loadFormByTypeReq } from "../../../api";
import icons from "./icon";
import { isContainByString } from "@/utils/index";
export default {
  name: "BaseSet",
  props: {
    value: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      groupList: [], // 审批分组列表
      typeList: [], // 审批类型列表
      showIcon: false,
      icons
    };
  },
  computed: {
    ...mapState(["hr"]),
    companyId() {
      return this.hr.companyId;
    }
  },
  created() {
    this.loadGroupList();
    this.loadTypeList();
  },
  methods: {
    onValueChange(e, key) {
      let val = "";
      switch (key) {
        case "typeName":
          val = e.target.value;
          break;
        case "groupId":
          val = e;
          break;
        case "type":
          val = e;
          this.onApprovalTypeChange(e);
          break;
        case "revokeType":
          val = e;
          break;
        case "isSysStart":
          val = e;
          break;
        case "icon":
          val = e;
          break;
        case "typeDesc":
          val = e.target.value;
          break;
        default:
          break;
      }
      const res = Object.assign({}, this.value, {
        [key]: val
      });
      console.log(res);
      this.$emit("input", res);
      this.$emit("change", res);
    },
    // 选择图标
    choseIcon(icon) {
      this.onValueChange(icon, "icon");
      this.showIcon = false;
    },
    loadGroupList() {
      loadApprovalGroupListReq(
        isContainByString("newApprovalAdmin")
          ? "0"
          : isContainByString("defaultTransferAccounts")
          ? "defaultTransferAccounts"
          : this.companyId,
        "hr"
      )
        .then(res => {
          this.groupList = res.data;
        })
        .catch(err => {
          console.log("debug log --> ", err);
        });
    },
    loadTypeList() {
      loadApprovalTypeListReq()
        .then(res => {
          this.typeList = res.data ? res.data : [];
        })
        .catch(err => {
          console.log("debug log --> ", err);
        });
    },
    onApprovalTypeChange(flowType) {
      loadFormByTypeReq(flowType)
        .then(({ data }) => {
          if (data && data.length) {
            data.map(v => (v.props = JSON.parse(v.props)));
            console.log("debug log --> ", data);
            this.$emit("formTypeChange", data);
          }
        })
        .catch(err => {
          console.log("debug log --> ", err);
        });
    }
  }
};
</script>
